<template>
  <swiper ref="swiper" :key="refreshKey" :options="swiperOption" v-if="albumPicList.length>0">
    <swiper-slide  class="swiper-slide" v-for="(item,index) in albumPicList" :key="index">
      <div  class="slide-img">
        <img :src="item"  alt/>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
  import moment from 'moment'
  import 'swiper/dist/css/swiper.css'
  // let vm = null
    export default {
      name: "forRecordDetailBanner",
      props:['albumPics'],
      data () {
        return {
          albumPic:'',//图片路径
          albumPicList:'',//图片集合
          refreshKey: '',
          swiperOption: {
            slidesPerView: 1,
            spaceBetween: 0,
            loopFillGroupWithBlank: true,
            //显示分页
            pagination: {
              el: '.swiper-pagination'
            },
            //设置点击箭头
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            loop: false,
            //自动轮播
            autoplay:false,
          }
        }
      },
      watch: {
        albumPics: function(newVal,oldVal){
          this.albumPic = newVal;
          this.getAlbumPics();
        }
      },
      activated () {
        this.$nextTick(() => {
          this.getAlbumPics()
        })
      },
      methods: {
        getAlbumPics(){
          this.albumPicList = this.albumPic.split(',')
        },
      },
    }
</script>

<style scoped lang="scss">
  .slide-img{
    img {
      width: 100%;
      height: auto;
    }
  }
</style>
